<template>
  <el-card class="box-card">
     <my-breadcrumb></my-breadcrumb>
      <el-form ref="form" :model="form" label-width="80px">
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
             <el-radio :label="null">全部</el-radio>
             <el-radio :label="0">草稿</el-radio>
             <el-radio :label="1">待审核</el-radio>
             <el-radio :label="2">审核通过</el-radio>
             <el-radio :label="3">审核失败</el-radio>
             <el-radio :label="4">已删除</el-radio>
           </el-radio-group>
         </el-form-item>
         <my-channel @input="hInput"></my-channel>
         <el-form-item label="活动时间">
            <el-date-picker
              v-model="form.dateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
         </el-form-item>
         <el-form-item>
           <el-button :loading="isLoading" type="primary" @click="onSubmit">查询</el-button>
         </el-form-item>
      </el-form>
      <el-table
      v-loading="isLoading"
      :data="articleData"
      style="width: 100%; margin-bottom: 20px;">
      <el-table-column
        label="封面"
        width="180">
        <template slot-scope="scope">
          <el-image
           style="width:100px;height:100px"
           :src="scope.row.cover.images[0]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope = "scope">
           <el-tag :type="scope.row.status | contentType">{{scope.row.status | contentText}}</el-tag>
           <!-- <el-tag v-if = "scope.row.status === 0">草稿</el-tag>
           <el-tag v-if = "scope.row.status === 2" type="success">审核通过</el-tag>
           <el-tag v-if = "scope.row.status === 1" type="info">待审核</el-tag>
           <el-tag v-if = "scope.row.status === 3" type="warning">审核失败</el-tag>
           <el-tag v-if = "scope.row.status === 4" type="danger">已删除</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="pubdate"
        label="发布时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope = "scope">
         <el-button type="primary" icon="el-icon-edit" circle @click="hEdit(scope.$index , scope.row)"></el-button>
         <el-button type="danger" icon="el-icon-delete" circle @click="hDelete(scope.$index , scope.row)"></el-button>
         <!--scope.$index表示索引，scope.row表示当前行的数据  -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    layout="prev, pager, next"
    :page-size="10"
    :disabled="isLoading"
    @current-change="hCurChange"
    :total="all_count">
  </el-pagination>
  </el-card>
</template>

<script>
import MyChannel from '../../components/MyChannel.vue'
export default {
  name: 'article1',
  components: {
    MyChannel: MyChannel
  },
  data () {
    return {
      articleData: [],
      all_count: 0,
      page: 1,
      form: {
        dateRange: null,
        status: null,
        channelid: null
      },
      isLoading: false
    }
  },
  methods: {
    onSubmit: function () {
      this.loadArticles()
    },
    hCurChange (nowpage) {
      // console.log('页码改变', nowpage)
      this.page = nowpage
      this.loadArticles()
    },
    hInput (value) {
      console.log(value)
      this.form.channelid = value
    },
    sendRequest () {
      const { dateRange, status, channelid } = this.form
      const params = { page: this.page, status: status, channel_id: channelid }
      if (dateRange) {
        params.begin_pubdate = dateRange[0]
        params.end_pubdate = dateRange[1]
        console.log(dateRange)
        // dataRange为一个数组，用户选择会将值传入，如不选择已经默认为null axios默认将null是项目过滤掉
      }
      return params
    },
    async loadArticles () {
      this.isLoading = true
      try {
        const params = this.sendRequest()
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: params
        })
        console.log(res)
        this.articleData = res.data.data.results
        this.all_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        // 加一句清空数据
        this.articleData = []
      }
      this.isLoading = false
    },
    async doDelete (id) {
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id
        })
        console.log(res)
        this.loadArticles()
      } catch (err) {
        console.log(err)
      }
    },
    hEdit (index, row) {
      console.log(index, row)
      this.$router.push('/edit/' + row.id)
    },
    hDelete (index, row) {
      this.$confirm('确定删除？').then(() => {
        const id = row.id.toString()
        this.doDelete(id)
      }).catch((err) => { console.log(err) })
      console.log(index, row)
    }
  },
  filters: {
    contentType (status) {
      const type = {
        0: '',
        1: 'info',
        2: 'success',
        3: 'warning',
        4: 'danger'
      }
      return type[status]
    },
    contentText (status) {
      const type = {
        0: '草稿',
        1: '待审核',
        2: '审核通过',
        3: '审核失败',
        4: '已删除'
      }
      return type[status]
    }
  },
  created () {
    this.loadArticles()
  }
}
</script>
<style scoped lang="less">
  .upcard {
    margin-bottom: 20px;
  }
</style>
